<template>
    <h2>绑定对象</h2>
    <span>我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：</span>
    <div :class="{ active: isActive }" @click="bbb">:class="{ active: isActive }"</div>

    <h2>绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：</h2>
    <div :class="classObject">:class="classObject"</div>

    <h2>我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：</h2>
    <div :class="classObject1">:class="classObject1"</div>

    <h2>我们可以给 :class 绑定一个数组来渲染多个 CSS class：</h2>
    <div :class="[activeClass, errorClass]"> :class="[activeClass, errorClass]"</div>

    <h2>如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：</h2>
    <div :class="[isActive ? activeClass : '', errorClass]">:class="[isActive ? activeClass : '', errorClass]"</div>

    <h2>然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：</h2>
    <div :class="[{ [activeClass]: isActive }, errorClass]">:class="[{ [activeClass]: isActive }, errorClass]"</div>

</template>

<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';

const isActive = ref(true)
const hasError = ref(false)

const activeClass = ref('active')
const errorClass = ref('text-danger')



const bbb = () => {
    if (isActive.value === true) {
        isActive.value = false
    } else if (isActive.value === false) {
        isActive.value = true
    }
}


const classObject = reactive({
    active: true,
    'text-danger': false
})


const isActive1 = ref(true)
const error = ref(null)

const classObject1 = computed(() => ({
    active: isActive.value && !error.value,
    'text-danger': error.value && error.value === 'fatal'
}))
</script>

<style>
.active {
    font-size: 22px;
    color: aqua;
}
</style>